import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { stateSelector } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import { map, size } from 'lodash-es';
import TFParamLora from './TFParamLora';

const selector = createSelector(
  stateSelector,
  ({ lora }) => {
    return { lorasArray: map(lora.loras) };
  },
  defaultSelectorOptions
);

const ParamLoraList = () => {
  const { lorasArray } = useAppSelector(selector);

  if (!size(lorasArray)) {
    return null;
  }

  return (
    <Flex flexDirection="column" gap="2">
      {map(lorasArray, (lora) => (
        <TFParamLora key={lora.model_name} lora={lora} />
      ))}
    </Flex>
  );
};

export default ParamLoraList;
